<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/11 0011
  Time: 下午 4:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>Title</title>

    <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
    <script src="../../layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../layui-v2.4.5/layui/css/layui.css" media="all">
</head>
<body>
<style>
    .layui-table-view{
        margin-bottom: 120px;
    }
</style>
<div>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-right: 100px"  href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>


    <select name="state" id="state" lay-verify="" style="margin-top:1rem !important;font-size: 1.3rem;line-height:30px;"
            onchange="seachOrder()">
        <option value="">全部</option>
        <option value="1" <c:if test="${state eq '1'}">selected="selected"</c:if> >已支付</option>
        <option value="0" <c:if test="${state eq '0'}">selected="selected"</c:if>>未支付</option>
        <option value="3" <c:if test="${state eq '3'}">selected="selected"</c:if>>已发货</option>
        <option value="2" <c:if test="${state eq '2'}">selected="selected"</c:if>>未发货</option>


    </select>
    <script>
            function seachOrder() {
                window.location.href='/order/shopPayList?state='+$("#state").val();
            }
    </script>
</div>


<table class="layui-table" lay-data="{url:'/order/orderListData?state=${state}', page:true, id:'id',width:1600}" lay-filter="demo">
    <thead>
    <tr>
        <%--<th lay-data="{type:'checkbox', fixed: 'left'}"></th>--%>
        <th lay-data="{field:'id',width:260 }">订单id</th>
        <th lay-data="{field:'createTime', width:180 }">提交时间</th>
        <th lay-data="{field:'money', width:100}">订单金额</th>
        <th lay-data="{field:'state', width:100}">订单状态</th>
        <th lay-data="{fixed: 'right',  width:100, align:'center', toolbar: '#logistics',fixed:false}">物流信息</th>
        <th lay-data="{fixed: 'right',  width:200, align:'center', toolbar: '#editOrder',fixed:false}">订单操作</th>
        <th lay-data="{fixed: 'right',  width:100, align:'center', toolbar: '#orderInfo',fixed:false}">详细信息</th>
        <th lay-data="{field:'commodityDescribe',width:300}">商品简述</th>
    </tr>
    </thead>
</table>



<script type="text/html" id="editOrder">
    <a class="layui-btn layui-btn-xs" lay-event="editOrder" >编辑订单</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a class="layui-btn layui-btn-xs" style="color: red;background-color:darkkhaki" lay-event="delOrder" >删除订单</a>
</script>
<script type="text/html" id="logistics">
    <a class="layui-btn layui-btn-xs" lay-event="logistics" >物流详情</a>
</script>

<script type="text/html" id="orderInfo">
    <a class="layui-btn layui-btn-xs" lay-event="orderInfo" >订单详情</a>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use('element', function(){
        var element = layui.element;
    });

    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj);
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;

            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'delOrder'){
                console.log('ID：'+ data.state    + ' 的查看操作');
                console.log(data);
                if (data.state!='未支付'){
                    layer.alert("只能删除未支付订单");
                    return false;
                }
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'/order/delOrder',
                        type:'POST', //GET
                        async:true,    //或false,是否异步
                        data:{
                            id:data.id,
                            state:data.state,
                        },
                        timeout:5000,    //超时时间
                        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                        beforeSend:function(xhr){
                            /*console.log(xhr)
                             console.log('发送前')*/
                        },
                        success:function(reData){
                            if (""!=reData){
                                layer.alert("删除成功", {icon: 6},function () {
                                    window.location.reload();
                                });
                            }else {
                                layer.alert("保存失败", {icon: 5});
                            }
                        },
                        error:function(xhr,textStatus){
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        },
                        complete:function(){
                            //console.log('结束')
                        }
                    });

                    return false;
                });

            } else if(obj.event === 'orderInfo'){//
                layer.open({
                    type: 2,

                    title:"订单详情",
                    shadeClose:true,
                    offset: '0px',
                    area: ['95%', '90%'],
                    content: '/order/orderInfo?id='+obj.data.id,
                    end:function () {
                        window.location.reload();
                    }
                });
            }else if (obj.event=='logistics'){//物流信息
                layer.open({
                    type: 2,
                    title:"物流信息",
                    shadeClose:true,
                    area: ['90%', '90%'],
                    offset: '0px',
                    content: '/order/logistics?orderId='+obj.data.id,
                    end:function () {
                        window.location.reload();
                    }
                });
            }else if (obj.event=='editOrder'){
                layer.open({
                    type: 2,
                    title:"订单编辑",
                    shadeClose:true,
                    offset: '0px',
                    area: ['95%', '95%'],
                    content: '/order/editOrder?id='+obj.data.id,
                    end:function () {
                        //window.location.reload();
                    }
                });
            }else if(obj.event=='rebateStting'){
                layer.open({
                    type: 2,
                    title:"返利设置",
                    shadeClose:true,
                    offset: '30px',
                    area: ['50%', '50%'],
                    content: '/marketing/configRule?orgId='+obj.data.id,
                    end:function () {
                        window.location.reload();
                    }
                });
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });




</script>





</body>
</html>
